<template>
    <view class="tuijians">
        <view class="head">
            <view class="head1">精选保险推荐</view>
            <view class="head2">查看更多</view>
        </view>
        <scroll-view class="view" scroll-x="true" enable-flex="true">
            <view class="img1" style="margin-right: 40rpx">
                <view
                    style="
                        margin-top: 66rpx;
                        margin-left: 40rpx;
                        color: #ff4658;
                        font-weight: 600;
                        font-size: 36rpx;
                    "
                    >中老年必备保险</view
                >
                <view style="position: absolute; left: 41rpx; top: 120rpx"
                    >老年意外险</view
                >
                <view class="but"> 点击查看 </view>
            </view>
            <view class="img2">
                <view
                    style="
                        margin-top: 66rpx;
                        margin-left: 40rpx;
                        color: #015bfd;
                        font-weight: 600;
                        font-size: 36rpx;
                    "
                    >个人保障住院保险</view
                >
                <view style="position: absolute; left: 541rpx; top: 120rpx"
                    >个人保障</view
                >
                <view class="but"> 点击查看 </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    name: "tuijian",
    data() {
        return {};
    },
};
</script>

<style lang="scss" scoped >
.tuijians {
    box-sizing: border-box;
    .view {
        width: 100%;
        height: 280rpx;

        border-radius: 20rpx;
        display: flex;
        white-space: nowrap;
        position: relative;
        .img1 {
            background-image: url(../../static/iamges/baoxianfense@2x.png);
            background-size: 100%;
            .but {
                width: 192rpx;
                height: 66rpx;
                background-color: #ff623c;
                position: absolute;
                left: 38rpx;
                top: 180rpx;
                border-radius: 35rpx;
                text-align: center;
                line-height: 66rpx;
                color: #ffffff;
            }
        }
        .img2 {
            background-image: url(../../static/iamges/baoxianlanse@2x.png);
            background-size: 100%;
            .but {
                width: 192rpx;
                height: 66rpx;
                background-color: #015bfd;
                position: absolute;
                left: 541rpx;
                top: 180rpx;
                border-radius: 35rpx;
                text-align: center;
                line-height: 66rpx;
                color: #ffffff;
            }
        }
        view {
            height: 280rpx;
            width: 454rpx;

            display: inline-block;
        }
    }
    .head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24rpx;

        .head1 {
            font-size: 36rpx;
            color: #333333;
            font-weight: 700;
        }
        .head2 {
            font-size: 24rpx;
            color: #999999;
            padding-top: 5rpx;
            box-sizing: border-box;
        }
    }
}
</style>
